<template><div><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>javascript基础01&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">		&#x3C;!-- html css 直接通过浏览器解析 --></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * js 弱类型语言 不需要定义数据类型，在执行时自动识别</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * js 解释性语言 脚本语言</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 计算机不能直接理解高级语言，只能直接理解机器语言，所以必须要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 一个是编译，一个是解释。两种方式只是翻译的时间不同。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 编译型语言写的程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了（exe文件），</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高,</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 但也不能一概而论，部分解释型语言的解释器通过在运行时动态优化代码，甚至能够使解释型语言的性能超过编译型语言。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 解释则不同，解释性语言的程序不需要编译，省了道工序，解释性语言在运行程序的时候才翻译，比如解释性basic语言，专门有一个解释器能够直接执行basic程序，每个语句都是执行的时候才翻译。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 这样解释性语言每执行一次就要翻译一次，效率比较低。解释是一句一句的翻译。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * js 定义变量的关键词 var</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * es6 不推荐使用var,推荐使用let</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * var 定义的变量 全局变量  在整个js的范围都可以使用</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 如果在定义变量前使用变量的值为undefined </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * let 定义的变量 局部变量 必须先定义后使用</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * const 定义常量</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75">  x</span><span style="color:#56B6C2"> =</span><span style="color:#D19A66"> 1</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">			const</span><span style="color:#E5C07B"> y</span><span style="color:#56B6C2"> =</span><span style="color:#D19A66"> 2</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">x</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">y</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">typeof</span><span style="color:#E06C75"> x</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 查看变量的数据类型</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/** js 数据类型</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 1 number 数字(整数 小数)</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 2 string 字符串</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 3 boolean 布尔值</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 4 undefined 未定义的变量</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 5 function (******)</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 6 object 对象类型</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#E06C75">			x</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> 'abc'</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">typeof</span><span style="color:#E06C75"> x</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/** </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 多个值同时进行定义赋值 解构赋值</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span><span style="color:#ABB2BF"> </span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#ABB2BF"> [</span><span style="color:#E06C75">a1</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a2</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a3</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a4</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#ABB2BF"> [</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">3</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">4</span><span style="color:#ABB2BF">];</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">a1</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a2</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a3</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a4</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 同时打印四个值	</span></span>
<span class="line"><span style="color:#ABB2BF">			[</span><span style="color:#E06C75">a1</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a2</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a3</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a4</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#98C379"> "abcd"</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 字符串本来就是数组 </span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">a1</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a2</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a3</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">a4</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 对象的结构赋值</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * js中内置的数据类型 -> Date 日期</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">typeof</span><span style="color:#E06C75"> Date</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 类型时function(native function) 是系统自带的获取时间的api</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#61AFEF">Date</span><span style="color:#ABB2BF">());</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> now</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> Date</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 如果使用new关键字 则now是对象 否则now是函数的返回值，类型为字符串</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">now</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getFullYear</span><span style="color:#ABB2BF">());</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/** js 方法</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 1 定义方法</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 	 关键字 方法名(形参){方法逻辑}</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 2 调用方法</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 	 方法名();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * js 不能进行方法重载 使用内置arguments对象进行重载实现</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> add</span><span style="color:#ABB2BF">(){ </span><span style="color:#7F848E;font-style:italic">// ES6使用 rest参数 ...形参名</span></span>
<span class="line"><span style="color:#E5C07B">				console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">arguments</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// js方法内置对象，获取不确定的实参 类型为数组 </span></span>
<span class="line"><span style="color:#C678DD">				if</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">arguments</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">length</span><span style="color:#56B6C2"> ==</span><span style="color:#D19A66"> 0</span><span style="color:#ABB2BF">) </span><span style="color:#E5C07B">console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"add方法没有传参"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">				else</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">					let</span><span style="color:#E06C75"> sum</span><span style="color:#56B6C2"> =</span><span style="color:#D19A66"> 0</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">					for</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">let</span><span style="color:#E06C75"> i</span><span style="color:#C678DD"> in</span><span style="color:#E5C07B"> arguments</span><span style="color:#ABB2BF">) </span><span style="color:#E06C75">sum</span><span style="color:#56B6C2">+=</span><span style="color:#E5C07B">arguments</span><span style="color:#ABB2BF">[</span><span style="color:#E06C75">i</span><span style="color:#ABB2BF">];</span></span>
<span class="line"><span style="color:#E5C07B">					console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">`传入的参数总和为</span><span style="color:#C678DD">${</span><span style="color:#E06C75">sum</span><span style="color:#C678DD">}</span><span style="color:#98C379">`</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">				}</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#61AFEF">			add</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">10</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">200</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">300</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 函数声明 两种方式</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 1 function 函数名(){} 优先加载 优先分配</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 2 let 函数名 = function(){} 必须先定义才能使用</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 3 箭头函数（es6新增) const 函数名 = ()=>{} 同2先定义在使用</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#61AFEF"> test</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">				console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test函数调用"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#61AFEF">			test</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#61AFEF">			test1</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> test1</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">				console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test1函数调用"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#C678DD">			const</span><span style="color:#61AFEF"> test2</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> ()</span><span style="color:#C678DD">=></span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#E5C07B">				console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test函数调用"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#61AFEF">			test2</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * 通过function进行一类事物的表示</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> Cat</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75;font-style:italic">age</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75;font-style:italic">type</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#E5C07B">				this</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">name</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> name</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">				this</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">age</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> age</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">				this</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">type</span><span style="color:#56B6C2"> =</span><span style="color:#E06C75"> type</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">				this</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">run</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> function</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">					console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"run方法被执行了"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">				}</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> cat</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> Cat</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test"</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">"2"</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">"花猫"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">typeof</span><span style="color:#E06C75"> cat</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">			cat</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">run</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">cat</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">) </span><span style="color:#7F848E;font-style:italic">// 属性访问</span></span>
<span class="line"><span style="color:#E5C07B">			cat</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">color</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "黑色"</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 对象的属性如果不存在，则进行属性自动的添加</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">cat</span><span style="color:#ABB2BF">); </span></span>
<span class="line"><span style="color:#C678DD">			for</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">let</span><span style="color:#ABB2BF"> [</span><span style="color:#E06C75">key</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">value</span><span style="color:#ABB2BF">] </span><span style="color:#C678DD">of</span><span style="color:#E5C07B"> Object</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">entries</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">cat</span><span style="color:#ABB2BF">)) </span><span style="color:#E5C07B">console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">key</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">value</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 查看一个对象包含了多少属性多少方法</span></span>
<span class="line"><span style="color:#C678DD">			for</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">let</span><span style="color:#E06C75"> i</span><span style="color:#C678DD"> in</span><span style="color:#E06C75"> cat</span><span style="color:#ABB2BF">)  </span><span style="color:#E5C07B">console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">i</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">cat</span><span style="color:#ABB2BF">[</span><span style="color:#E06C75">i</span><span style="color:#ABB2BF">]); </span><span style="color:#7F848E;font-style:italic">// for in 循环也可以</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * json表达对象,使用花括号进行结构</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#C678DD">			const</span><span style="color:#E5C07B"> dog</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E06C75">				name</span><span style="color:#ABB2BF">:</span><span style="color:#98C379">'xiaobai'</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">				age</span><span style="color:#ABB2BF">:</span><span style="color:#98C379">'5'</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">				color</span><span style="color:#ABB2BF">:</span><span style="color:#98C379">'white'</span></span>
<span class="line"><span style="color:#ABB2BF">			};</span></span>
<span class="line"><span style="color:#ABB2BF">			</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#ABB2BF"> {</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">age</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">color</span><span style="color:#ABB2BF">} </span><span style="color:#56B6C2">=</span><span style="color:#E06C75"> dog</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 对象解构</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">age</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">color</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">			const</span><span style="color:#E5C07B"> dog2</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> { </span><span style="color:#7F848E;font-style:italic">// 对象的组装</span></span>
<span class="line"><span style="color:#E06C75">				name</span><span style="color:#ABB2BF">:</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">, </span><span style="color:#7F848E;font-style:italic">// 可以简化为 name,</span></span>
<span class="line"><span style="color:#E06C75">				age</span><span style="color:#ABB2BF">:</span><span style="color:#E06C75">age</span><span style="color:#ABB2BF">, </span><span style="color:#7F848E;font-style:italic">// 可以简化 age,</span></span>
<span class="line"><span style="color:#E06C75">				color</span><span style="color:#ABB2BF">:</span><span style="color:#E06C75">color</span><span style="color:#ABB2BF"> ,</span><span style="color:#7F848E;font-style:italic">// 可以简化color</span></span>
<span class="line"><span style="color:#61AFEF">				bark</span><span style="color:#ABB2BF">:()</span><span style="color:#C678DD">=></span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#E5C07B">					console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"dog2正在叫"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">				}</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">dog2</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">			dog2</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">bark</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 * string常用方法</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			 */</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> str</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "abcdaadcdaaabcd"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">charAt</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">3</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 获取指定位置的字符</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">at</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">3</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 获取指定位置的字符</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">startsWith</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"a"</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 查看是否以指定字符串开头</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">endsWith</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"d"</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 查看是否以指定字符串开头</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">toLowerCase</span><span style="color:#ABB2BF">()); </span><span style="color:#7F848E;font-style:italic">// 转小写</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">toUpperCase</span><span style="color:#ABB2BF">()); </span><span style="color:#7F848E;font-style:italic">// 转大写</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">substring</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">4</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 字符串截取左闭右开</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> s</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "2"</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">s</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">padStart</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">'0'</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 如果字符串长度不够的话，在前面补字符0</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> date</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> Date</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> pat</span><span style="color:#56B6C2"> =</span><span style="color:#98C379">  `</span><span style="color:#C678DD">${</span><span style="color:#E5C07B">date</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getFullYear</span><span style="color:#ABB2BF">()</span><span style="color:#C678DD">}</span><span style="color:#98C379">-</span><span style="color:#C678DD">${</span><span style="color:#E5C07B">date</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getMonth</span><span style="color:#ABB2BF">().</span><span style="color:#61AFEF">toString</span><span style="color:#ABB2BF">().</span><span style="color:#61AFEF">padStart</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">'0'</span><span style="color:#ABB2BF">)</span><span style="color:#C678DD">}</span><span style="color:#98C379">-</span><span style="color:#C678DD">${</span><span style="color:#E5C07B">date</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getDay</span><span style="color:#ABB2BF">()</span><span style="color:#C678DD">}</span><span style="color:#98C379">`</span><span style="color:#7F848E;font-style:italic">// 字符串模板 es6</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">pat</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 格式化日期字符串</span></span>
<span class="line"><span style="color:#E5C07B">			str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">trim</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 去除前后空格</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">replace</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"a"</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">"X"</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 用X替换字符串中所有的a字符</span></span>
<span class="line"><span style="color:#C678DD">			let</span><span style="color:#E06C75"> reg</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> RegExp</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">/a</span><span style="color:#D19A66">?</span><span style="color:#E06C75">/</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 正则表达式</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">reg</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">test</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">str</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 正则表达式是否匹配</span></span>
<span class="line"><span style="color:#E5C07B">			console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">str</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">replace</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">/a</span><span style="color:#D19A66">+</span><span style="color:#E06C75">/</span><span style="color:#C678DD">g</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">"X"</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 使用正则表达式来替换,必须使用全局正则表达式所以最后要加个g</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">> </span><span style="color:#7F848E;font-style:italic">&#x3C;!-- js 通过浏览器的javascript引擎执行，为了防止浏览器交替执行，所以一般js代码放到最后 --></span><span style="color:#ABB2BF"> </span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></div></template>


